<template>
  <div class="tool-bar">
    <div class="tool-bar-item" v-for="(item, index) in toolBarData" :key="index">
      <!-- 当前标签的index === 选中时的index 让img显示高亮图片 -->
      <img class="tool-bar-item-img" :src="index === selectItemIndex? item.hIcon : item.nIcon" alt="">
      <p class="tool-bar-item-name" :class="{'tool-bar-item-name-h': index === selectItemIndex}">{{item.name}}</p>
    </div>
  </div>
</template>

<script>
/**
 * 组件本身不需要关注页面的位置
 * 应该让调用者来决定组件位置
 *
 * 点击后需要向父组件传递事件
 *
 * 按钮选中时切换按钮状态
 */
export default {
  data: function () {
    return {
      toolBarData: [
        {
          nIcon: require("@img/home-n.svg"),
          hIcon: require("@img/home-h.svg"),
          name: "首页",
          componentName: "home", //所对应的组件名称
        },
        {
          nIcon: require("@img/shopping-n.svg"),
          hIcon: require("@img/shopping-h.svg"),
          name: "购物车",
          componentName: "shopping", //所对应的组件名称
        },
        {
          nIcon: require("@img/my-n.svg"),
          hIcon: require("@img/my-h.svg"),
          name: "我的",
          componentName: "my", //所对应的组件名称
        },
      ],
      selectItemIndex:0, // 当前选中的 tab
    };
  },
};
</script>

<style lang="scss" scoped>
</style>